Haeyul Blog

003. [Android compose] Modifier이란

3 min read

Modifier(수정자)의 개념

Modifier은 안드로이드에서 Composable의 장식을 강화할 수 있는 도구로,

Modifier(수정자)로 가능한 것들

  • 크기/레이아웃/모양 변경 : size, padding, fillMaxWidth, clip, border
  • 접근성/의미 정보 추가 : 접근성 라벨, 테스트 태크
  • 사용자 입력 처리 : 터치/제스처 처리
  • 고수준 상호작용 추가 : clickable, scrollable, draggle, 확대/축소 등

Modifier 사용 예시

@Composable
private fun Greeting(name: String) {
	Column(modifier = modifier.padding(24.dp)) {
		Text(text = "Hello, ")
		Text(text = name)
	} 
}
@Composable
private fun Greeting(name: String) {
	Column(
		modifier = Modifier
			.padding(24.dp)
			.fillMaxWidth()
	) {
		Text(text = "Hello ,")
		Text(text = name)
	}
}
  • padding : 요소 주위에 공간을 배치합니다.
  • fillMaxWidth : 컴포저블이 상위 요소로부터 부여받은 최대 너비를 채우도록 한다.

수정자의 순서가 중요

modifier 함수의 순서는 다른 함수간의 영향을 준다.

이전 함수에서 반환한 Modifier 를 변경하므로 순서는 최종 결과에 영향을 준다.

@Composable
fun ArtistCard(/*...*/) {
	val padding = 16.dp
	Column(
		Modifier
			.clickable(onClick = onClick)
			.padding(padding)
			.fillMaxWith()
	) {
		
	}
}

위 코드에서 padding 수정자가 clickable 수정자 뒤에 적용되어 있으므로, 주변 패딩을 포함해 전체 영역을 클릭할 수 있다.

@Composable
fun ArtistCard(/**/) {
	val padding = 16.dp
	Column(
		Modifier
			.padding(padding)
			.clickable(onClick = onClick)
			.fillMaxWidth()
	) {
		// rest of the implementation
	}
}

내장 수정자

padding 및 size

@Composable
fun ArtistCard(/**/){
	Row(
		modifier = Modifier.size(width = 400.dp, height = 100.dp)
	) {
		Image(/*...*/)
		Column(/*...*/)
	}
}

컴포저블의 크기를 고정해야 하는 경우 requiredSize 수정자를 사용하여 컴포저블의 크기를 고정할 수 있다.

@Composable
fun ArtistCard() {
	Row(
		modifier = Modifier.size(width = 400.dp, height = 100.dp)
	) {
		Image(
			/*...*/
			modifier = Modifier.requiredSize(150.dp)
		)
		Column {/*...*/}
	}
}

상위 요소가 height 가 100.dp 로 설정되더라도 Image 높이는 150.dp가 된다. requiredSize 수정자가 우선하기 때문이다.

Graph View